<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>悬挂的喵</title>
  </head>

  <body>
    悬挂的喵
    <div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -999px;"></div>

    <p>底部</p>

  </body>
</html>

<style>
    body {
      background-color: #fff;
      height: 3500px;
    }
    p {
         position:absolute;
         margin-top: 2000px;
    }
  </style>
<link rel="stylesheet" type="text/css" href="./cat.css" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>
 $(function() {
        //scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
        $(window).scroll(function() {
                var scroHei = $(window).scrollTop();//滚动的高度
                if (scroHei > 500) {
                   $('.back-to-top').css('top','-200px');
                   // $('.back-to-top').fadeIn();
                } else {                                                
                    $('.back-to-top').css('top','-999px');
                    // $('.back-to-top').fadeOut();
                }
            })
            /*点击返回顶部*/
        $('.back-to-top').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 600);
        })
    })

</script>









